<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-title">已完成订单</view>
		
		<!-- 订单状态 -->
		<view class="order-status-section">
			<view class="status-text">已完成</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="section-title">订单信息</view>
			<view class="info-item">
				<view class="info-label">订单号：</view>
				<view class="info-value">121212112487878</view>
			</view>
			<view class="info-item">
				<view class="info-label">服务项目：</view>
				<view class="info-value">车辆保养</view>
			</view>
			<view class="info-item">
				<view class="info-label">服务门店：</view>
				<view class="info-value">大宝车辆维修店</view>
			</view>
			<view class="info-item">
				<view class="info-label">下单时间：</view>
				<view class="info-value">2023-03-08 17:40</view>
			</view>
			<view class="info-item">
				<view class="info-label">预约时间：</view>
				<view class="info-value">2023-03-09 17:40</view>
			</view>
			<view class="info-item">
				<view class="info-label">车辆：</view>
				<view class="info-value">奔驰FWE4/豫A98FHJ</view>
			</view>
			<view class="info-item">
				<view class="info-label">备注：</view>
				<view class="info-value"></view>
			</view>
		</view>
		
		<!-- 订单详情 -->
		<view class="order-detail">
			<view class="section-title">订单详情</view>
			<view class="detail-item">
				<view class="detail-name">车辆清洗</view>
				<view class="detail-price">¥39.90</view>
			</view>
			<view class="detail-item">
				<view class="detail-name">车辆附加费用</view>
				<view class="detail-price">¥0</view>
			</view>
			
			<view class="divider"></view>
			
			<view class="detail-item">
				<view class="detail-name">原价</view>
				<view class="detail-price">¥59.90</view>
			</view>
			<view class="detail-item">
				<view class="detail-name">店家优惠</view>
				<view class="detail-price discount">-¥20</view>
			</view>
			<view class="detail-item">
				<view class="detail-name">优惠券</view>
				<view class="detail-price discount">-¥10</view>
			</view>
			
			<view class="divider"></view>
			
			<view class="detail-item">
				<view class="detail-name">支付金额</view>
				<view class="detail-price total-price">¥29.9</view>
			</view>
		</view>
		
		<!-- 评价结果 -->
		<view class="evaluation-section">
			<view class="section-title">评价结果</view>
			<view class="evaluation-item">
				<view class="evaluation-label">评价时间：</view>
				<view class="evaluation-value">2022-10-10 11:09</view>
			</view>
			<view class="evaluation-item">
				<view class="evaluation-label">评价结果：</view>
				<view class="evaluation-value">
					<text class="stars">★★★★★</text>
				</view>
			</view>
			<view class="evaluation-comment">
				<view class="evaluation-label">评语：</view>
				<view class="comment-text">评语评语评语评语评语评语评语评语</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="btn btn-service" @click="contactService">联系客服</button>
			<button class="btn btn-reorder" @click="reorder">再来一单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			contactService() {
				uni.showToast({
					title: '联系客服',
					icon: 'none'
				});
			},
			reorder() {
				uni.showToast({
					title: '再来一单',
					icon: 'none'
				});
				// 实际项目中这里应该执行再来一单的逻辑
			}
		}
	};
</script>

<style>
	.container {
		padding: 0;
		font-size: 14px;
		line-height: 24px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.page-title {
		padding: 15px;
		background-color: #fff;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #eee;
	}
	
	.order-status-section {
		padding: 15px;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.status-text {
		font-size: 16px;
		color: #4cd964;
		font-weight: bold;
		text-align: center;
	}
	
	.order-info {
		padding: 15px;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.info-item {
		display: flex;
		margin-bottom: 12px;
	}
	
	.info-label {
		width: 80px;
		color: #666;
		font-size: 14px;
	}
	
	.info-value {
		flex: 1;
		font-size: 14px;
	}
	
	.order-detail {
		padding: 15px;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;
	}
	
	.detail-name {
		color: #333;
		font-size: 14px;
	}
	
	.detail-price {
		color: #333;
		font-size: 14px;
	}
	
	.divider {
		height: 1px;
		background: #f0f0f0;
		margin: 15px 0;
	}
	
	.discount {
		color: #ff9500;
	}
	
	.total-price {
		font-weight: bold;
		font-size: 16px;
	}
	
	.evaluation-section {
		padding: 15px;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.evaluation-item {
		display: flex;
		margin-bottom: 12px;
	}
	
	.evaluation-label {
		width: 80px;
		color: #666;
		font-size: 14px;
	}
	
	.evaluation-value {
		flex: 1;
		font-size: 14px;
	}
	
	.evaluation-comment {
		display: flex;
		margin-top: 15px;
	}
	
	.comment-text {
		flex: 1;
		font-size: 14px;
		color: #333;
		line-height: 1.6;
	}
	
	.stars {
		color: #ff9500;
		font-size: 16px;
	}
	
	.action-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background: #fff;
		padding: 10px 15px;
		border-top: 1px solid #eee;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}
	
	.btn {
		flex: 1;
		padding: 12px 0;
		border-radius: 6px;
		font-size: 15px;
		text-align: center;
		margin: 0 5px;
	}
	
	.btn-service {
		border: 1px solid #ddd;
		background: #fff;
		color: #333;
	}
	
	.btn-reorder {
		border: 1px solid #ddd;
		background: #fff;
		color: #333;
	}
</style>